---
description:
  A provider component is used to set up the global environment for your
  project, such enabling as physics, post-processing, and custom context
  providers.
---

A provider component is used to set up the global environment for your project,
such enabling as physics, post-processing, and custom context providers.

## Create the component

First create a provider component, here we will place it next to the Triplex
config but it can be anywhere in your project source files.

```
touch .triplex/provider.tsx
```

And then copy and paste the following code into the file.

```tsx
// .triplex/provider.tsx
export default function Provider({ children }: React.PropsWithChildren<{}>) {
  return <>{children}</>;
}
```

## Set the config

In your `.triplex/config.json` file set the `provider` prop to the relative
location of the component you've just made. If you used the same location as
above then it will look like this:

```json
{
  "provider": "./provider.tsx"
}
```

## Add some props

Props that are declared on your provider component will appear as controls in
the editor that can be set temporarily during a session.

Try adding a prop and using it, when the prop is set to `"dark"` you should see
a black background, and when it's `"light"` you should see a light background.

```tsx
export default function Provider({
  children,
  sky,
}: React.PropsWithChildren<{ sky?: "dark" | "light" }>) {
  return (
    <>
      <color args={[dark ? "#000" : "#fff"]} attach="background" />
      {children}
    </>
  );
}
```

Default values are respected by the editor. If you always wanted to have a dark
background you can set it.

```diff
export default function Provider({
  children,
+  sky = "dark",
}: PropsWithChildren<{ sky?: "dark" | "light" }>) {
  return (
    <>
      <color args={[dark ? "#000" : "#fff"]} attach="background" />
      {children}
    </>
  );
}
```

For more information on what types appear appear as what inputs see
[Declaring Props](/docs/get-started/declaring-props).
